<div id="wrap">
	<div class="title"><?php echo $self['title']?></div>
	<div class="main">
		<div class="kind">
			<p class="tt">主版面<span class="zhu">(只显示可执行权限的主版)</span></p>
			<select id="zone">
			<?php foreach($zone_data as $zone_item){ ?>
				<option value="<?php echo $zone_item['id']?>" <?php if($_COOKIE['curr_zone'] == $zone_item['id']){echo 'selected';}?>><?php echo $zone_item['name']?></option>
			<?php } ?>
			</select>
		</div>
	
	<div id="all-add" class="clearfix">
		
	</div>

		<div>
			<p class="tt">分类列表</p>
			<ul class="add" id="kind">
			
			</ul>
		</div>
		
		<div class="list">
			<p class="tt">从版面列表</p>
			<table class="banmian">
				<thead>
					<tr><th>版面名称</th><th>所属分类</th><th>管理员</th><th>操作</th></tr>
				</thead>
				<tbody id="tbody">
				
				</tbody>
			</table>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
  function ajax(url,fun){
  	let xmlhttp = new XMLHttpRequest();
  	xmlhttp.onreadystatechange = fun;
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
  }
  let add = document.getElementById('all-add');
  let zone = document.getElementById('zone');
  let kind = document.getElementById('kind');
  let tbody = document.getElementById('tbody');

  
  ajax("module_page.php?id="+zone.value,function() {
	    if(this.readyState==4 && this.status==200) {
	    	let data = JSON.parse(this.response);
	    	tbody.innerHTML = data.html;
	    	kind.innerHTML = data.li;
	    	add.innerHTML = data.div;
	    }
  	});
 
  zone.onchange = function(){
 
  	ajax("module_page.php?id="+this.value,function() {
	    if(this.readyState==4 && this.status==200) {
	   		let data = JSON.parse(this.response);
	    	tbody.innerHTML = data.html;
	    	kind.innerHTML = data.li;
	    	add.innerHTML = data.div;
	    }
  	});
  }
  
  add.onclick = function(e){
  	if(Object.prototype.toString.call(e.target) !== '[object HTMLButtonElement]'){
  		return
  	}
  	let name = document.getElementById('name');
  	let name2 = document.getElementById('name2');
    let name_val = name.value.trim();
    let name2_val = name2.value.trim();
  	if(e.target.getAttribute('id') == 'add'){
  	    if(name_val.length == 0){
  	        name.focus();
  	        return
  	    }
	  	ajax(`add.php?type=2&name=${name_val}&id=${zone.value}`,function() {
		    if(this.readyState==4 && this.status==200) {
		    	let {res} = JSON.parse(this.response);
		      	if(res){
		      		window.location.reload();
		      	}else{
		      		alert('版面已经存在了！')
		      	}
		    }
	  	});
  	}else{
  	    if(name2_val.length == 0){
  	        name2.focus();
  	        return
  	    }
	  	ajax(`add.php?type=3&name=${name2_val}&id=${zone.value}`,function() {
		    if(this.readyState==4 && this.status==200) {
		    	let {res} = JSON.parse(this.response);
		      	if(res){
		      		window.location.reload();
		      	}else{
		      		alert('分类已经存在了！')
		      	}
		    }
	  	});
  	}
  	
  }
  kind.onclick = function(e){
	let id = e.target.getAttribute('id');
  	if(id != 'sort' && !/^\d+$/.test(id)){
  		return
  	}
  	if(id=='sort'){
  		let sort2 = document.getElementsByClassName('sort');
	  	let len = sort2.length;
	  	let str = '';
	  	for(let i = 0;i<len;i++){
	  		if(i !== len-1){
				str += sort2[i].value+',';
	  		}else{
	  			str += sort2[i].value;
	  		}
	  	}
	  	ajax(`ud.php?type=2&sort=${str}&id=${zone.value}`,function() {
		    if(this.readyState==4 && this.status==200) {
		      	window.location.reload();
		    }
	  	});
  	}else{
  		if(confirm('您确定要删除吗?')){

		  	ajax(`del.php?type=3&id=${id}`,function() {
			    if(this.readyState==4 && this.status==200) {
			    	let {res} = JSON.parse(this.response);
			      	if(res){
			      		window.location.reload();
			      	}else{
			      		alert('无法删除,因为该分类正被使用');
			      	}
			    }
		  	});
  		}
  	}
  	
  }

 tbody.onclick = function(e){

 	let id = e.target.getAttribute('id');
 	if(!/^\d+$/.test(id)){
 		return
 	}
 	if(confirm('您确定要删除吗?')){

	  	ajax(`del.php?type=2&id=${id}`,function() {
		    if(this.readyState==4 && this.status==200) {
		    	let {res} = JSON.parse(this.response);
		      	if(res){
		      		window.location.reload();
		      	}
		    }
	  	});
  	}
 }
</script>
</html>